<template>
  <view class="bg">
    <view class="tab">
      <view
        v-for="(item,idx) in tab"
        :key="idx"
        @click="handleTabClick(idx)"
        :class="tabIdx===idx?'tabChooce':''"
      >{{item.tit}}</view>
    </view>
  </view>
</template>

<script>

export default {

  data () {
    return {
      tabIdx: 0,

    }
  },
  props: {
    tab: {
      type: Array,
      default: []
    },
    tabIndex: {
      type: Number,
      default: 0
    }
  },
  watch: {
    tabIndex: {
      handler (val) {
        this.tabIdx = val

      },
      deep: true
    }
  },
  methods: {
    handleTabClick (idx) {
      this.tabIdx = idx
      this.$emit('tabChange', this.tabIdx)
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  left: 0;
  right: 0;
  height: 100rpx;
  .tabChooce {
    color: #0cd4d3 !important;
    border-bottom: 4rpx solid #0cd4d3 !important;
  }
  view {
    margin: 0 28rpx;
    transition: all 0.5s;
    border-radius: 6rpx;
    border-bottom: 6rpx solid #fff;
    font-size: 28rpx;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
